<template>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="11">
            <div class="grid-content bg-purple ddd1" style="display: flex;margin-left: 45px;">
              <div>
                <img src="../assets/cxy.jpeg" alt="" />
              </div>
             
                <div v-for="item in data" :key="item.id">
                  <h3>{{ item.uname }}</h3>
                  <h4>等级：超级vip</h4>
                
                <h3>欢迎成为我们尊贵的用户</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="13"
            ><div class="grid-content bg-purple ddd2">
              <div>
                <a href="./order">
                  <img src="../assets/111.jpeg" alt="" />
                </a>
                <span>未出行订单(0)</span>
              </div>
              <div>
                <a href="./order">
                  <img src="../assets/111.jpeg" alt="" />
                </a>
                <span>待评价订单(0)</span>
              </div>
              <div>
                <a href="./order">
                  <img src="../assets/111.jpeg" alt="" />
                </a>
                <span>代付款订单(0)</span>
              </div>
              <div>
                <a href="./order">
                  <img src="../assets/111.jpeg" alt="" />
                </a>
                <span>消息提醒(0)</span>
              </div>
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-main style="margin: 0 20px">
        <div class="main1">
          <h4>我的订单</h4>
          <a href="./order">查看全部订单</a>
        </div>
        <el-table
          :data="tableData"
          style="
            width: 99%;
            border-radius: 10px;
            background-color: rgb(245, 245, 245) !important;
          "
        >
         <el-table-column prop="oid" label="订单编号"> </el-table-column>
      <el-table-column prop="arrdate" label="入住时间"> </el-table-column>
      <el-table-column prop="leavedate" label="离开时间"> </el-table-column>
        </el-table>
      </el-main>
     
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      data: "",
      tableData: [],
    };
  },
  mounted() {
    this.getData();
    this.download();
  },
  methods: {
    getData() {
      // http://localhost:3000/register
      var url = "http://localhost:3000/register/1";
      axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data.data;
      });
    },
    download() {
      var url = "http://localhost:3000/order/infor/1";
      axios.get(url).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" >
// .common-table-container .el-table,
// .common-table-container .el-table__expanded-cell {
//   //background-color: transparent !important;
//   background-color: #313856;
//   color: #fff;
// }
.el-card__body,
.el-main {
  padding: 0;
}
.el-row {
  margin-bottom: 20px;
height: 100px;
  display: flex;

  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.main1 {
  margin-top: 70px;

  display: flex;
  justify-content: space-between;
  height: 30px;
  a {
    color: black;
    text-decoration: none;
  }
}
.el-table{
  margin-top: 20px;
}
.grid-content.ddd1 {
  border-radius: 4px;
  height: 110px;
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    border: 4px solid #e3e3e3;
  }
}
.grid-content.ddd2 {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  div {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    a {
      text-align: center;
      float: left;

      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
        border: 4px solid #e3e3e3;
      }
    }
  }
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>